<template>
  <view>
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      订单详情
    </view>
    <view class="content">
      <view class="sec0" v-if="showtime">
        <view class="lef">
          <view class="bt">等待买家付款</view>
          <view class="fbt">剩{{ min }}分{{ second }}秒自动关闭</view>
        </view>
        <!-- <image
          class="timeIcon"
          src="../../../static/Shopping/timeIcon.png"
          mode=""
        /> -->
      </view>
      <view class="fgx" v-if="!showtime"></view>
      <view class="sec1">
        <view class="Adrees">
          <image class="img1" src="../../../static/Shopping/dwdz.png" mode="" />
          <view class="cen">
            <view class="top">
              收件人：{{ orderCommon.consignee_name }}
              <text>{{ orderCommon.consignee_mobile }}</text>
            </view>
            <view class="bot">收货地址：{{ address }}</view>
          </view>
        </view>
      </view>
      <view class="sec2">
        <text class="title">平台自营</text>
        <view class="row">
          <image
            class="img"
            :src="detail.image"
            mode=""
            @click="jumpdetial(detail.goods_id)"
          />
          <view class="rig">
            <view class="top" @click="jumpdetial(detail.goods_id)">
              <text>{{ detail.name }}</text>
              <text>¥{{ detail.price }}</text>
            </view>
            <view class="cen">
              <text class="num">x{{ detail.number }}</text>
            </view>
            <view class="bot">
              <view class="btn can" v-if="detail.status == 0">已取消</view>
              <view
                class="btn"
                v-if="detail.status == 10"
                @click="cancellOrder(1)"
                >取消订单</view
              >
              <view class="btn bg" v-if="detail.status == 10" @click="openPay"
                >去付款</view
              >
              <view
                class="btn"
                v-if="
                  (detail.status == 20 ||
                    detail.status == 30 ||
                    detail.status == 40) &&
                  detail.can_refund == 1
                "
                @click="refund(detail.order_sn)"
                >退款</view
              >
              <view class="btn bg" v-if="detail.status == 20">已付款</view>
              <view class="btn" v-if="detail.status == 30">已发货</view>
              <view
                class="btn"
                v-if="detail.status == 30"
                @click="Viewlog(detail.order_sn)"
                >查看物流</view
              >
              <view
                class="btn bg"
                v-if="detail.status == 30"
                @click="cancellOrder(2)"
                >确认收货</view
              >
              <!-- <view class="btn" v-if="detail.status == 40">已收货</view> -->
              <view
                class="btn bg"
                v-if="detail.status == 40 && detail.evaluation_state == 0"
                @click="releaseval(detail.order_sn)"
                >待评价</view
              >
              <view
                class="btn"
                v-if="
                  detail.status == 40 &&
                  (detail.evaluation_state == 1 || detail.evaluation_state == 2)
                "
                >已完成</view
              >
              <view
                class="btn bg"
                v-if="detail.status == 50"
                @click="refundDetail(detail.order_sn)"
                >申请退款</view
              >
              <view class="btn" v-if="detail.status == 60">已退款</view>
              <view class="btn" v-if="detail.status == 70">拒绝退款</view>
            </view>
          </view>
        </view>
        <view class="spzj">
          <text>商品总价</text>
          <text>￥{{ detail.price * detail.number }}</text>
        </view>
        <view class="spzj">
          <text>邮费（快递）</text>
          <text v-if="detail.shipping_fee == 0">包邮</text>
          <text v-else>￥{{ detail.shipping_fee }}</text>
        </view>
        <view class="sfk">
          <text>实付款</text>
          <text>￥{{ detail.true_amount }}</text>
        </view>
      </view>
      <view class="sec3">
        <text class="title">订单信息</text>
        <view class="row">
          <view>订单编号：{{ detail.order_sn }}</view>
          <view class="copy" @click="copyurl(detail.order_sn)">复制</view>
        </view>
        <view class="row">
          <view>下单时间：{{ detail.add_time | formatDate }}</view>
        </view>
        <view class="row">
          <view>支付方式：{{ zffs }}</view>
        </view>
        <view class="row" v-if="orderCommon.shipping_code">
          <view>快递单号：{{ orderCommon.shipping_code }}</view>
          <view class="copy" @click="copyurl(orderCommon.shipping_code)"
            >复制</view
          >
        </view>
      </view>
      <view class="sec4">
        <image class="img" src="../../../static/Shopping/wntj.png" mode="" />
        <view class="lists">
          <view
            class="item"
            @click="jump(item.id)"
            v-for="(item, i) in hotList"
            :key="i"
          >
            <image class="itemImg" :src="item.main_image" />
            <view class="des">{{ item.name }}</view>
            <view class="price"
              >￥{{ item.price }}
              <view class="or_price">￥{{ item.original_price }}</view></view
            >
          </view>
        </view>
      </view>
    </view>
    <!-- 支付方式 -->
    <uni-popup ref="popupPay" type="bottom">
      <view class="payboxs">
        <view class="selectPopup_one">
          <image
            src="../../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <view class="zfje">
            支付金额：<text style="color: #c52b2e"
              >{{ detail.true_amount || "0" }}元</text
            >
          </view>
        </view>
        <scroll-view
          :scroll-into-view="toView"
          scroll-y="true"
          scroll-with-animation="true"
          class="scroll-y"
        >
          <view class="pop_two" @click="changeActive(0)">
            <view class="left">
              <image class="img" src="../../../static/yue.png" mode="" />
              <view class="col">
                <text>余额</text>
              </view>
            </view>
            <image
              v-if="actives == 0"
              class="img"
              src="../../../static/check.png"
              mode=""
            />
          </view>
          <view class="pop_two" @click="changeActive(1)">
            <view class="left">
              <image class="img" src="../../../static/yonj.png" mode="" />
              <view class="col">
                <text>佣金</text>
              </view>
            </view>
            <image
              v-if="actives == 1"
              class="img"
              src="../../../static/check.png"
              mode=""
            />
          </view>
          <view class="pop_two" @click="changeActive(2)">
            <view class="left">
              <image class="img" src="../../../static/wechat.png" mode="" />
              <view class="col">
                <text>微信</text>
              </view>
            </view>
            <image
              v-if="actives == 2"
              class="img"
              src="../../../static/check.png"
              mode=""
            />
          </view>
          <view class="pop_two" @click="changeActive(3)" v-if="show">
            <view class="left">
              <image class="img" src="../../../static/alipay.png" mode="" />
              <view class="col">
                <text>支付宝</text>
              </view>
            </view>
            <image
              v-if="actives == 3"
              class="img"
              src="../../../static/check.png"
              mode=""
            />
          </view>
        </scroll-view>
        <view class="pbtn" @click="comnfirmPay">确定</view>
      </view>
    </uni-popup>
    <!-- 交易密码弹窗 -->
    <uni-popup ref="popPasword" type="bottom">
      <view class="boxs boxss">
        <view class="selectPopup_one">
          <image
            src="../../../static/clos.png"
            class="clos"
            mode="widthFix"
            @click="cancell"
          ></image>
          <text style="margin: 0 auto">请输入支付密码</text>
        </view>
        <validcode
          ref="pwd"
          :maxlength="6"
          :isPwd="true"
          @finish="getPwd"
        ></validcode>
      </view>
    </uni-popup>
    <!-- 取消订单弹窗 -->
    <uni-popup ref="popup" type="center">
      <view class="popCenter">
        <view class="title">温馨提示</view>
        <text style="padding: 40rpx 0">{{ title }}</text>
        <view class="popBtn">
          <text class="cancel" @click="cancell">取消</text>
          <text
            class="cancel"
            @click="confimQd"
            style="border: 0; color: #c52b2e"
            >确定</text
          >
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      token: "",
      order_sn: "", // 订单号
      detail: "",
      orderCommon: "",
      address: "",
      zffs: "", // 支付方式
      toView: "",
      actives: 2, // 支付方式
      orderCode: "", //订单编号
      payment: "wx", // 支付方式
      payPassword: "", // 支付密码
      isCommission: "0", // 非必传,默认为0,是否为佣金支付:0=否,1=是
      title: "您是否要取消订单？",
      types: "1", // 1:取消订单  2:确认收货
      hotList: [], // 推荐商品
      currentTime: "", // 当前时间
      pay_max_time: "", // 等待支付时间
      showtime: false,
      day: "0",
      hour: "00",
      min: "00",
      second: "00",
    };
  },
  // onShow() {
  //   this.orderDetail(this.order_sn);
  // },
  onLoad(e) {
    this.token = uni.getStorageSync("token");
    this.order_sn = e.order_sn;
    this.orderCode = e.order_sn;
    this.orderDetail(this.order_sn);
    this.isWechat();
    this.getHot();
  },
  methods: {
    gobackClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 判断是否在浏览器
    isWechat() {
      let en = window.navigator.userAgent.toLowerCase();
      if (en.match(/MicroMessenger/i) == "micromessenger") {
        // 微信内部打开默认微信支付 payment传空
        this.show = false;
        this.Wechatenvironment = true;
      } else {
        this.show = true;
        this.Wechatenvironment = false;
      }
    },
    // 获取订单详情
    async orderDetail(id) {
      const res = await this.$myRequest({
        url: "order/orderDetail",
        method: "POST",
        data: {
          order_sn: id,
        },
      });
      if (res.data.code == 1) {
        this.detail = res.data.data;
        this.orderCommon = res.data.data.orderCommon;
        this.address =
          this.orderCommon.consignee_province_name +
          this.orderCommon.consignee_city_name +
          this.orderCommon.consignee_area_name +
          this.orderCommon.consignee_address_detail;
        this.getpayment(this.detail.pay_way);

        uni.setStorage({
          key: "detail",
          data: this.detail,
        });

        this.currentTime = new Date().getTime();
        this.pay_max_time = res.data.data.pay_max_time * 1000;
        if (this.pay_max_time) {
          if (this.currentTime >= this.pay_max_time) {
            this.showtime = false;
            this.confimQd(); // 倒计时时间到,未付款的订单自动取消订单
          } else {
            this.showtime = true;
            this.countTime();
          }
        } else {
          this.showtime = false;
        }
      }
    },
    // 获取推荐商品
    async getHot() {
      const res = await this.$myRequest({
        url: "goods/hot",
        method: "POST",
      });
      if (res.data.code == 1) {
        this.hotList = res.data.data.data;
      }
    },
    // 申请退款
    refund(id) {
      uni.navigateTo({
        url: "./refund?order_sn=" + id,
      });
    },
    // 退款详情
    refundDetail(id) {
      uni.navigateTo({
        url: "./Refundetails?order_sn=" + id,
      });
    },
    // 查看物流
    Viewlog(id) {
      uni.navigateTo({
        url: "./ViewLogistics?order_sn=" + id,
      });
    },
    // 去评价
    releaseval(id) {
      uni.navigateTo({
        url: "./Releaseval?order_sn=" + id,
      });
    },
    // 查看商品详情
    jump(i) {
      uni.navigateTo({
        url: "../../Shopping/prodetails?id=" + i,
      });
    },
    // 查看当前订单商品详情
    jumpdetial(i) {
      uni.navigateTo({
        url: "../../Shopping/prodetails?id=" + i,
      });
    },
    //  获取支付方式
    getpayment(val) {
      switch (val) {
        case 0:
          return (this.zffs = "未付款");
        case 1:
          return (this.zffs = "余额");
        case 2:
          return (this.zffs = "微信");
        case 3:
          return (this.zffs = "支付宝");
        case 4:
          return (this.zffs = "佣金");
      }
    },
    // 复制链接
    copyurl(url) {
      var copyTest = url;
      var inputTest = document.createElement("input");
      inputTest.value = copyTest;
      document.body.appendChild(inputTest);
      inputTest.select();
      document.execCommand("Copy");
      inputTest.className = "oInput";
      inputTest.style.display = "none";
      uni.showToast({
        icon: "none",
        title: "复制成功",
      });
    },
    //选择支付方式
    changeActive(id) {
      this.actives = id;
      if (id == 0) {
        this.isCommission = 0;
      } else if (id == 1) {
        this.isCommission = 1;
      } else if (id == 2) {
        this.payment = "wx";
      } else if (id == 3) {
        this.payment = "zfb";
      }
    },
    // 确定支付
    openPay() {
      this.$refs.popupPay.open();
    },
    comnfirmPay() {
      this.$refs.popupPay.close();
      if (this.actives == 0 || this.actives == 1) {
        // 余额和佣金支付需要支付密码
        this.$refs.popPasword.open();
      } else {
        this.h5Pay(); // 微信或者支付宝支付
      }
    },
    // 支付密码输入完成
    getPwd(val) {
      this.moneyPay(val);
    },
    async moneyPay(val) {
      const res = await this.$myRequest({
        url: "pay/moneyPay",
        method: "POST",
        data: {
          orderCode: this.orderCode,
          isCommission: this.isCommission,
          payPassword: val,
        },
      });
      if (res.data.code == 1) {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
        this.cancell();
        uni.navigateTo({
          url: "./payment",
        });
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
        this.cancell();
      }
    },
    // h5支付
    async h5Pay() {
      let that = this;
      if (this.Wechatenvironment) {
        // 微信内部打开默认微信支付
        const datas = await this.$myRequest({
          url: "pay/wx_pay",
          method: "POST",
          data: {
            order_sn: this.orderCode, //订单号
          },
        });
        if (datas.data.code == 1) {
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: datas.data.data.appId, //公众号名称，由商户传入
              timeStamp: datas.data.data.timeStamp, //时间戳，自1970年以来的秒数
              nonceStr: datas.data.data.nonceStr, //随机串
              package: datas.data.data.package,
              signType: datas.data.data.signType, //微信签名方式：
              paySign: datas.data.data.paySign, //微信签名
            },
            function (res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠
                uni.request({
                  url: "https://www.123qifu.com/api/pay/weixin_getList",
                  method: "POST",
                  header: {
                    token: that.token,
                  },
                  data: {
                    order_sn: that.orderCode,
                  },
                  success: (res) => {
                    if (res.data.code == 1) {
                      uni.navigateTo({
                        url: "./payment",
                      });
                    }
                  },
                });
              }
            }
          );
        }
        return;
      }
      if (this.payment == "zfb") {
        //  支付宝支付
        const ress = await this.$myRequest({
          url: "user/h5Pay",
          method: "POST",
          data: {
            orderCode: this.orderCode,
            payment: this.payment,
          },
        });
        // 提交form表单
        document.querySelector("body").innerHTML = ress.data;
        document.forms[0].submit();
      } else {
        // 微信支付
        const ress = await this.$myRequest({
          url: "user/h5Pay",
          method: "POST",
          data: {
            orderCode: this.orderCode,
            payment: this.payment,
          },
        });
        let res = ress.data.data;
        if (res.return_msg === "OK") {
          // mweb_url是统一下单接口返回的链接

          // redirect_url就是支付成功后跳转的链接,需要encode后拼接到mweb_url后面,

          //如果不需要跳转则忽略redirect_url,不拼接
          //这样跳转后, mweb_url就会调起微信支付
          window.location.href =
            res.mweb_url +
            "&redirect_url=" +
            encodeURIComponent(
              this.$process == "development"
                ? "https://www.123qifu.com/internaltesting/#/pages/user/Myorder/payment"
                : "https://www.123qifu.com/wechatdemo/#/pages/user/Myorder/payment" //正式环境
            );
        }
      }
    },
    // 获取订单号
    cancellOrder(id) {
      this.types = id;
      if (id == 1) {
        this.title = "您是否要取消订单？";
      } else {
        this.title = "您是否确认收货？";
      }
      this.order_sn = this.detail.order_sn;
      this.$refs.popup.open();
    },
    // 取消订单
    async confimQd() {
      if (this.types == 1) {
        const res = await this.$myRequest({
          url: "order/cancel",
          method: "POST",
          data: {
            order_sn: this.order_sn,
          },
        });
        if (res.data.code == 1) {
          uni.showToast({
            title: res.data.msg,
            icon: "none",
          });
          this.cancell();
          this.orderDetail(this.order_sn);
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: "none",
          });
          this.cancell();
        }
      } else {
        const res = await this.$myRequest({
          url: "order/received",
          method: "POST",
          data: {
            order_sn: this.order_sn,
          },
        });
        if (res.data.code == 1) {
          uni.showToast({
            title: res.data.msg,
            icon: "none",
          });
          this.cancell();
          this.orderDetail(this.order_sn);
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: "none",
          });
          this.cancell();
        }
      }
    },
    // 取消
    cancell() {
      this.$refs.popupPay.close();
      this.$refs.popPasword.close();
      this.$refs.popup.close();
    },
    // 倒计时
    countTime() {
      // 获取当前时间
      let date = new Date();
      let now = date.getTime();
      // 设置截止时间
      let endDate = new Date(this.pay_max_time); // this.curStartTime需要倒计时的日期
      let end = endDate.getTime();
      // 时间差
      let leftTime = end - now;
      // 定义变量 d,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        // 天
        this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        // 时
        let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
        this.hour = h < 10 ? "0" + h : h;
        // 分
        let m = Math.floor((leftTime / 1000 / 60) % 60);
        this.min = m < 10 ? "0" + m : m;
        // 秒
        let s = Math.floor((leftTime / 1000) % 60);
        this.second = s < 10 ? "0" + s : s;
      } else {
        this.day = 0;
        this.hour = "00";
        this.min = "00";
        this.second = "00";
      }
      // 等于0的时候不调用
      if (
        Number(this.hour) === 0 &&
        Number(this.day) === 0 &&
        Number(this.min) === 0 &&
        Number(this.second) === 0
      ) {
        this.confimQd(); // 倒计时时间到,未付款的订单自动取消订单
        return;
      } else {
        // 递归每秒调用countTime方法，显示动态时间效果,
        setTimeout(this.countTime, 1000);
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f4f4f4;
  height: 100vh;
  position: relative;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.content {
  padding-top: 88rpx;
  overflow: hidden;
  .sec0 {
    width: 100%;
    height: 206rpx;
    background: url("../../../static/Shopping/tkbj.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 40rpx 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .lef {
      .bt {
        font-size: 30rpx;
        color: #fff;
        font-weight: normal;
        margin-bottom: 15rpx;
      }
      .fbt {
        font-size: 26rpx;
        color: #fff;
      }
    }
    .timeIcon {
      display: block;
      width: 85rpx;
      height: 85rpx;
    }
  }
  .fgx {
    width: 100%;
    height: 20rpx;
  }
  .sec1 {
    width: 100%;
    min-height: 200rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 43rpx 30rpx;
    border-bottom: 20rpx solid #f4f4f4;
    overflow: hidden;
    .Adrees {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 30rpx;
      .img1 {
        display: block;
        width: 61rpx;
        height: 74rpx;
        margin-right: 40rpx;
      }
      .cen {
        width: 500rpx;
        .top {
          font-size: 30rpx;
          color: #333333;
          font-weight: bold;
          text {
            margin-left: 30rpx;
          }
        }
        .bot {
          font-size: 26rpx;
          font-weight: 400;
          color: #999999;
          margin-top: 15rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .img2 {
        display: block;
        width: 12rpx;
        height: 20rpx;
        margin-left: 10rpx;
      }
    }
  }
  .sec2 {
    width: 100%;
    min-height: 400rpx;
    box-sizing: border-box;
    padding: 30rpx;
    background: #fff;
    margin-bottom: 20rpx;
    .title {
      display: block;
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      box-sizing: border-box;
      padding-bottom: 25rpx;
      border-bottom: 1px solid #eee;
    }
    .row {
      width: 100%;
      box-sizing: border-box;
      padding: 30rpx 0;
      display: flex;
      justify-content: space-between;
      .img {
        display: block;
        width: 180rpx;
        height: 180rpx;
        border-radius: 4px;
        margin-right: 25rpx;
      }
      .rig {
        width: 70%;
        position: relative;
        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          text:nth-child(1) {
            font-size: 28rpx;
            color: #333333;
            font-weight: bold;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }
          text:nth-child(2) {
            font-size: 28rpx;
            color: #333333;
          }
        }
        .cen {
          font-size: 26rpx;
          color: #999999;
          margin-top: 20rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
        .bot {
          position: absolute;
          right: 0;
          left: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .btn {
            display: block;
            width: 110rpx;
            height: 35rpx;
            text-align: center;
            line-height: 35rpx;
            font-size: 22rpx;
            color: #c52b2e;
            border-radius: 40rpx;
            border: 1px solid #c52b2e;
            margin-left: 20rpx;
            &.bg {
              background: #c52b2e;
              color: #fff;
            }
            &.can {
              background: #fff;
              color: #c52b2e;
            }
          }
        }
      }
    }
    .spzj,
    .yfkd {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      text {
        font-size: 26rpx;
        color: #999999;
      }
    }
    .sfk {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text:nth-child(1) {
        font-size: 30rpx;
        color: #333;
      }
      text:nth-child(2) {
        font-size: 30rpx;
        color: #c52b2e;
      }
    }
  }
  .sec3 {
    width: 100%;
    min-height: 250rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 30rpx;
    .title {
      display: block;
      width: 100%;
      font-size: 30rpx;
      color: #333333;
      font-weight: bold;
      padding-bottom: 25rpx;
      border-bottom: 1px solid #eee;
    }
    .row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26rpx;
      color: #999999;
      padding-top: 25rpx;
      .copy {
        color: #c52b2e;
        font-weight: bold;
      }
    }
  }
  .sec4 {
    .img {
      display: block;
      width: 380rpx;
      height: 50rpx;
      margin: 30rpx auto;
    }
    .lists {
      width: 100%;
      box-sizing: border-box;
      padding: 0 20rpx;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      .item {
        width: 350rpx;
        height: 490rpx;
        background: #ffffff;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        border-radius: 10rpx;
        overflow: hidden;
        margin-bottom: 13rpx;
        .itemImg {
          display: block;
          width: 100%;
          height: 360rpx;
        }
        .des {
          width: 100%;
          box-sizing: border-box;
          padding: 10rpx 10rpx 0;
          font-size: 26rpx;
          color: #444444;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .price {
          display: flex;
          align-items: flex-end;
          width: 100%;
          box-sizing: border-box;
          padding: 10rpx 10rpx 0;
          color: #c52b2e;
          font-size: 26rpx;
          font-weight: bold;
          .or_price {
            font-size: 22rpx;
            font-weight: 400;
            text-decoration: line-through;
            color: #999999;
            margin-left: 15rpx;
          }
        }
      }
    }
  }
}
.payboxs {
  width: 100%;
  height: 700rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  .zfje {
    text-align: center;
    padding: 30rpx;
  }
  .selectPopup_one {
    display: flex;
    align-items: center;
    height: 40rpx;
    width: 100%;
    font-size: 28rpx;
    color: #333333;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #e0e0e0;
    position: relative;
    .clos {
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
    .zfje {
      width: 100%;
      text-align: center;
    }
  }
  .pop_two {
    width: 690rpx;
    height: 100rpx;
    box-sizing: border-box;
    border-bottom: 1px dashed #707070;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    .left {
      font-size: 30rpx;
      color: #333333;
      display: flex;
      align-items: center;
      .img {
        display: block;
        width: 60rpx;
        height: 60rpx;
        margin-right: 30rpx;
      }
      .col {
        text {
          display: block;
        }
        text:nth-child(2) {
          color: #999999;
        }
      }
    }
    > .img {
      display: block;
      width: 50rpx;
      height: 40rpx;
    }
  }
  // .pop_two:nth-child(3) {
  //   .left {
  //     .img {
  //       width: 55rpx;
  //       height: 45rpx;
  //     }
  //   }
  // }
  .pop_two:last-of-type {
    border-bottom: none;
  }
  .pbtn {
    width: 300rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    background: #c52b2e;
    border-radius: 40rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 70rpx auto 0;
  }
}
.boxs {
  width: 100%;
  height: 1000rpx;
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  &.boxss {
    height: 500rpx;
    .selectPopup_one {
      margin-bottom: 100rpx;
    }
  }
  .selectPopup_one {
    display: flex;
    align-items: center;
    height: 40rpx;
    width: 100%;
    font-size: 28rpx;
    color: #333333;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #e0e0e0;
    position: relative;
    .clos {
      width: 24rpx;
      position: relative;
      left: 39rpx;
    }
  }
  .scroll-y {
    height: 90%;
  }
  .xiaofei {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 690rpx;
    margin: 50rpx auto 0;
    padding-bottom: 40rpx;
    border-bottom: 1px dashed;
    .fukuan {
      display: flex;
      align-items: center;
    }
  }
  .xiaofei:last-of-type {
    border-bottom: none;
  }
}
.popCenter {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 546rpx;
  padding: 40rpx 0 0;
  background-color: #fff;
  font-size: 30rpx;
  color: #333333;
  border-radius: 10rpx;
  .title {
    text-align: center;
    font-size: 30rpx;
    font-weight: 550;
    color: #373737;
  }
  .popBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
    border-top: 1rpx solid #eee;
    border-radius: 0 0 10rpx 10rpx;

    .cancel {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #373737;
      width: 50%;
      height: 100%;
      border-right: 1rpx solid #eee;
      letter-spacing: 2rpx;
    }
  }
}
</style>
